<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title>国庆头像框小红旗生成</title>
	<style>
		html,
		body {
			padding: 0;
			margin: 0;
			height: 100%;
			background: linear-gradient(#ff4b3d, #ffde28) #ffde28;
			background-repeat: no-repeat;
			background-position: center;
			background-attachment: fixed;
			zoom: 1;
		}

		.header {
			color: #f0ff76;
			height: 3rem;
			text-align: center;
			margin: 10;
		}

		ul {
			width: 360px;
			margin: 0 auto 30px;
			overflow: hidden;
			list-style: none;
			padding: 0;
		}

		ul li {
			width: 25%;
			float: left;
			padding: 12px;
			/* 原12 */
			box-sizing: border-box;
		}

		ul li img {
			width: 100%;
		}

		canvas {
			margin: auto;
			display: none;
			background: transparent;
		}

		button {
			margin: 40px auto;
			display: block;
			width: 240px;
			height: 60px;
			color: #fff;
			background: linear-gradient(#ffe984, #ed8917) #ed8917;
			font-size: 22px;
			font-weight: bold;
			border-radius: 12px;
			border: none;
			outline: none;
		}

		.generateImg {
			display: block;
			margin: auto;
		}

		p {
			bottom: 0;
			margin: auto 0;
			text-align: center;
			font-size: 14px;
		}

		.gqkl {
			position: fixed;
			bottom: 50px;
			right: 30px;
			z-index: 100;
		}
	</style>
	<div class="header">
		<h2>国庆头像框小红旗生成</h2>
	</div>

	<ul>
		<li><img src="images/avatar-1.png"></li>
		<li><img src="images/avatar-2.png"></li>
		<li><img src="images/avatar-3.png"></li>
		<li><img src="images/avatar-4.png"></li>
		<li><img src="images/avatar-5.png"></li>
		<li><img src="images/avatar-6.png"></li>
		<li><img src="images/avatar-7.png"></li>
		<li><img src="images/avatar-8.png"></li>
		<li><img src="images/avatar-9.png"></li>
		<li><img src="images/avatar-10.png"></li>
		<li><img src="images/avatar-11.png"></li>
		<li><img src="images/avatar-12.png"></li>
		<li><img src="images/avatar-13.png"></li>
		<li><img src="images/avatar-14.png"></li>
		<li><img src="images/avatar-15.png"></li>
	</ul>

	<canvas id="canvas" width="320" height="320"></canvas>
	<img src=""
		class="generateImg">
	<input type="file" accept="image/*" hidden="">
	<button>上传图片</button>
	<div class="header" style="color: blue;">
		<b style="color: yellow;">友情链接: </b><a style="text-decoration: none;" href="https://azrng.gitee.io">主页</a>
	</div>
	<p>注意：①如果无法上传，请<b>退出再次识别/扫码进入</b>即可.②注意上传<b>正方形头像</b>.③长按或截屏以保存图片</p>
	<br>
	<script>
		const ul = document.querySelector('ul')
		const img = document.querySelectorAll('ul img')
		const button = document.querySelector('button')
		const canvas = document.querySelector('#canvas')
		const ctx = canvas.getContext('2d')
		const generateImg = document.querySelector('.generateImg')
		const fileUpload = document.querySelector('input')
		let upLoadImg
		let avatarIcon
		// 画canvas
		function drawImage(img) {
			ctx.drawImage(img, 0, 0, 320, 320)
		}
		// 清空canvas
		function resetCanvas() {
			console.log(canvas.width+" "+canvas.height);
			ctx.clearRect(0, 0, canvas.width, canvas.height)
			ctx.fillStyle = 'rgba(255, 255, 255, 0)'
		}

		function canvasToImg() {
			generateImg.src = canvas.toDataURL("image/png")
		}
		// 点击icon
		ul.addEventListener('click', function (event) {
			if (event.target.nodeName.toLowerCase() === 'img') {
				resetCanvas()
				upLoadImg && drawImage(upLoadImg)
				drawImage(event.target)
				canvasToImg()
				avatarIcon = event.target
			}
		})
		// 上传图片
		button.addEventListener('click', function () {
			fileUpload.click()
		})
		// 监听文件变化
		fileUpload.addEventListener('change', function () {
			const img = new Image()
			img.src = URL.createObjectURL(this.files[0])
			img.onload = function () {
				drawImage(img)
				drawImage(avatarIcon)
				canvasToImg()
				upLoadImg = img
			}
		})
		// 默认是第一张
		img[0].onload = function () {
			drawImage(img[0])
			avatarIcon = img[0]
			canvasToImg()
		}
	</script>
	<script>
		var _hmt = _hmt || [];
		(function() {
		  var hm = document.createElement("script");
		  hm.src = "https://hm.baidu.com/hm.js?c4f2f3a2a05c20841ad474413a52eaba";
		  var s = document.getElementsByTagName("script")[0]; 
		  s.parentNode.insertBefore(hm, s);
		})();
		</script>
		
</body>

</html>